<template>
  <div class="app-container">
    <template v-if="showPage == true">
      <div class="search-bar">
        <el-form ref="formRef" :model="couponForm" label-width="auto" :inline="true">
          <el-form-item label="编码">
            <el-input v-model="couponForm.coupon" placeholder="券码" clearable />
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="couponForm.type"
              placeholder="请选择"
              style="width: 150px"
              clearable
            >
              <el-option label="到店礼" :value="1" />
              <el-option label="补贴券" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="couponForm.keywords" placeholder="请输入券名称" clearable />
          </el-form-item>
          <el-form-item label="创建时间" prop="operationStartTime">
            <el-date-picker
              v-model="couponForm.operationStartTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">
              <template #icon>
                <Search />
              </template>
              搜索
            </el-button>
            <el-button @click="handleResetQuery">
              <template #icon>
                <Refresh />
              </template>
              重置
            </el-button>
            <el-button type="primary" @click="handleEdit('', 'add')">
              <template #icon>
                <DocumentAdd />
              </template>
              申请
            </el-button>
          </el-form-item>
        </el-form>
        <el-tabs v-model="couponForm.status" class="enter-tabs" @tab-change="handleTabClick">
          <el-tab-pane
            v-for="item in tabList"
            :key="item.id"
            :label="item.label"
            :name="item.id"
          ></el-tab-pane>
        </el-tabs>
        <BasePageTable
          :table-data="tableData"
          :table-columns-data="tableColumnsData"
          :total="total"
          :loading="loading"
          :page-num="couponForm.pageNum"
          :page-size="couponForm.pageSize"
          @handleQuery="changePage"
        >
          <template #index="scoped">{{ scoped.index + 1 }}</template>
          <template #type="{ row }">
            <span v-if="row.type == 1">到店礼</span>
            <span v-else>补贴券</span>
          </template>
          <template #publishTime="{ row }">
            {{ row.claimStartTime }} - {{ row.claimEndTime }}
          </template>
          <template #startEffectiveTime="{ row }">
            {{ row.effectiveStartTime }} - {{ row.effectiveEndTime }}
          </template>
          <template #status="{ row }">
            <el-tag :type="statues[row.status].name">{{ statues[row.status].status }}</el-tag>
          </template>
          <!-- <template #files="{ row }">
            <el-image
              v-if="row.files[0]?.url"
              style="width: 100px; height: 100px"
              :src="row.files[0]?.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="1"
              z-index="9999"
              fit="cover"
            />
          </template> -->
          <!-- <template #budgetMin="{ row }">{{ row.budgetMin }} - {{ row.budgetMax }}</template> -->
          <template #enable="{ row }">
            <el-switch
              v-model="row.enable"
              :active-value="1"
              :inactive-value="2"
              @change="
                ($event) => {
                  handleChange($event, row);
                }
              "
            ></el-switch>
          </template>
          <template #operation="{ row, name }">
            <el-button link type="primary" @click="handleEdit(row, 'look')">查看</el-button>
          </template>
        </BasePageTable>
      </div>
    </template>
    <template v-else>
      <ApplyForm v-if="opneType == 'add'" @backTo="backTo" />
      <Details v-else :infos="detailsInfo" @backTo="backTo"></Details>
    </template>
  </div>
</template>

<script setup>
import ApplyForm from "../components/applyForm/index.vue";
import couponApi from "@/api/coupon/coupon";
import Details from "../components/details.vue";

const showPage = ref(true);
const couponForm = ref({
  coupon: undefined,
  type: undefined,
  status: 1,
  title: "",
  operationStartTime: "",
  pageNum: 1,
  pageSize: 10,
});
const tabList = ref([
  { id: 1, label: "待审核" },
  { id: 2, label: "已通过" },
  { id: 3, label: "已驳回" },
  { id: 4, label: "已过期" },
]);
const statues = ref({
  1: { name: "primary", status: "待审核" },
  2: { name: "success", status: "已通过" },
  3: { name: "danger", status: "已驳回" },
  4: { name: "danger", status: "已过期" },
});
const opneType = ref("add");
const detailsInfo = ref();
const tableData = ref([]);
const tableColumnsData = ref([
  {
    prop: "index",
    label: "序号",
    showOverflowTooltip: true,
    customSlot: "index",
  },
  {
    prop: "code",
    label: "编码",
    showOverflowTooltip: true,
  },
  {
    prop: "type",
    label: "类型",
    showOverflowTooltip: true,
    customSlot: "type",
  },
  {
    prop: "title",
    label: "名称",
    showOverflowTooltip: true,
  },
  {
    prop: "amount",
    label: "券额",
    showOverflowTooltip: true,
  },
  {
    prop: "publishTime",
    label: "兑换时间",
    showOverflowTooltip: true,
    customSlot: "publishTime",
  },
  {
    prop: "startEffectiveTime",
    label: "可用时间",
    showOverflowTooltip: true,
    customSlot: "startEffectiveTime",
  },
  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    prop: "totalStorage",
    label: "数量",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "files",
  //   label: "支付凭证",
  //   showOverflowTooltip: true,
  //   customSlot: "files",
  // },
  // {
  //   prop: "budgetMin",
  //   label: "预算范围",
  //   showOverflowTooltip: true,
  //   customSlot: "budgetMin",
  // },
  // {
  //   prop: "enable",
  //   label: "券状态",
  //   showOverflowTooltip: true,
  //   customSlot: "enable",
  // },
  {
    prop: "createTime",
    label: "创建时间",
    showOverflowTooltip: true,
  },
  {
    prop: "operation",
    label: "操作",
    width: 200,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);
const loading = ref(false);
const total = ref(0);

function handleTabClick() {
  getList();
}
function handleResetQuery() {}
function changePage(val) {
  couponForm.pageNum = val.pageNum;
  couponForm.pageSize = val.pageSize;
  getList();
}

async function getList() {
  try {
    await couponApi.couponStorageList(couponForm.value).then((res) => {
      tableData.value = res.data;
      for (let i = 0; i < tableData.value.length; i++) {
        tableData.value[i].imgs = [tableData.value[i].files?.url];
      }
      console.log(tableData.value);
      total.value = res.total;
    });
  } catch (e) {
    console.log(e);
  }
}
function backTo(val) {
  showPage.value = true;
  if (val == true) {
    getList();
  }
}

async function handleChange(statues, data) {
  console.log(statues, data);
  try {
    const datas = {
      id: data.id,
      enable: statues,
    };
    await couponApi.couponEnable(datas);
    getList();
  } catch (e) {}
  // couponStorage/enable
}

function handleEdit(row, type) {
  if (row.status === 3) {
    ElMessageBox.confirm(row.auditDesc, "驳回理由", {
      type: "warning",
    });
  } else {
    opneType.value = type;
    showPage.value = false;
    detailsInfo.value = row;
  }
}

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.demo-image__error .image-slot {
  font-size: 30px;
  z-index: 999;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
  z-index: 999;
}
.demo-image__error .el-image {
  z-index: 999;
  width: 100%;
  height: 200px;
}
</style>
